<template>
  <div class="user">
    <h4>用户管理</h4>
    <!-- 用户列表 -->
    <table>
      <thead>
        <th>编号</th>
        <th>用户名</th>
        <th>手机</th>
        <th>密码</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="item in userlist" :key="item.id">
          <td>{{ item.id }}</td>
          <td>{{ item.username }}</td>
          <td>{{ item.phone }}</td>
          <td>{{ item.password }}</td>
          <td>
            <button @click.prevent="gotoDetail(item.id)">详情</button>
            <button>删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div class="add">
      <p>用户名：<input type="text" v-model.trim="username" /></p>
      <p>手机号：<input type="text" v-model.trim="phone" /></p>
      <p>密码：<input type="text" v-model.trim="password" /></p>
      <button @click="add">添加</button>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  name: "MyUser",
  data() {
    return {
      userlist: [],
      newId: 11000000,
      username: "",
      password: "",
      phone: "",
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    add() {
      if ((this.username = ""||this.password==""||this.phone=="")) {
        return;
      }
      this.userlist.unshift(
        {
          id: this.newId++,
          username: this.username,
          password: this.password,
          phone: this.phone,
        }
        //   alert("添加成功")
      );
    },
    getUserList() {
      axios({
        method: "get",
        url: "http://106.52.94.26:3001/user/userList?page=1&pageSize=10&searchText=admin",
      }).then((res) => {
        console.log(res);
        if (res.data.code == 200) {
          this.userlist = res.data.list;
        }
      });
    },
    gotoDetail(id) {
      this.$router.push("/home/userinfo?id=" + id);
    },
  },
};
</script>
<style scoped>
.add {
  display: grid;
  justify-items: center;
  align-items: center;
}
</style>
